<template>
  <div class="query">
    <div class="title-wrap">
      <!-- <img src="@/assets/images/xiaoLOGO.png" /> -->
      <span>运费时效查询</span>
      <div class="right" @click="goContent">导航栏</div>
    </div>
    <van-cell-group>
      <van-cell
        title="原寄地"
        required
        is-link
        :value="inform.oldAddress || '请选择原寄地'"
        class="van-padding"
        @click="destination.show=true"
      />
      <van-cell
        title="目的地"
        required
        is-link
        :value="inform.destination || '请选择目的地'"
        class="van-padding"
        @click="chooseRangle(1)"
      />
      <van-field
        label="运输方式"
        required
        input-align="right"
        v-model="type.value"
        placeholder="请选择运输方式"
        class="van-padding"
        readonly
        is-link
        @click="type.show=true"
      />
      <van-field
        label="货物"
        required
        v-model="inform.goodsName"
        placeholder="请输入寄出货物名称"
        input-align="right"
        class="van-padding"
      />
      <van-field
        v-model="inform.weight"
        placeholder="请输入物品重量"
        input-align="right"
        type="number"
        required
      >
        <div slot="label">
          重量
          <div class="desc">单位:kg</div>
        </div>
      </van-field>
      <van-field
        v-model="inform.long"
        placeholder="请输入物品长度"
        type="number"
        input-align="right"
        required
      >
        <div slot="label">
          物品长度
          <div class="desc">单位:cm</div>
        </div>
      </van-field>
      <van-field
        v-model="inform.wide"
        placeholder="请输入物品宽度"
        type="number"
        input-align="right"
        required
      >
        <div slot="label">
          物品宽度
          <div class="desc">单位:cm</div>
        </div>
      </van-field>
      <van-field
        v-model="inform.high"
        placeholder="请输入物品高度"
        type="number"
        input-align="right"
        required
      >
        <div slot="label">
          物品高度
          <div class="desc">单位:cm</div>
        </div>
      </van-field>
    </van-cell-group>
    <div class="van-btn">
      <van-button type="info" size="large" :disabled="isDisabled" @click="goResult">查询</van-button>
    </div>
    <!--    选择目的地（国家、仓库）的模态框-->
    <van-popup
      v-model="origin.show"
      @click-overlay="selectDestination"
      position="bottom"
      lock-scroll
      round
      safe-area-inset-bottom
    >
      <div class="addressTitle">
        <div class="back" @click="destinationBack">退出</div>
        <input
          type="text"
          ref="search"
          v-model="abroadPicker.countryValue"
          placeholder="请输入国家关键字"
          @input="countryChange($event)"
          @blur="handleBlur"
        />
        <div class="back" @click="selectDestination">确认</div>
      </div>
      <van-tabs v-model="abroadPicker.active" @change="changActive" swipeable>
        <van-tab title="国家">
          <van-picker
            :columns="abroadPicker.country"
            value-key="countryName"
            @change="checkCountry"
          />
        </van-tab>
        <van-tab title="仓库">
          <van-picker :columns="abroadPicker.store" value-key="depotName" @change="checkStore" />
        </van-tab>
      </van-tabs>
    </van-popup>
    <!--    选择省市区的模态框-->
    <van-popup
      v-model="destination.show"
      @click-overlay="selectAddress"
      position="bottom"
      lock-scroll
      round
      safe-area-inset-bottom
    >
      <div class="addressTitle">
        <div class="back" @click="addressBack">退出</div>
        <div class="back" @click="selectAddress">确认</div>
      </div>
      <van-tabs v-model="homePicker.active" swipeable>
        <van-tab title="省">
          <van-picker :columns="homePicker.sheng" value-key="name" @change="checkSheng" />
        </van-tab>
        <van-tab title="市">
          <van-picker :columns="homePicker.shi" value-key="name" @change="checkShi" />
        </van-tab>
        <van-tab title="区">
          <van-picker :columns="homePicker.qu" value-key="name" @change="checkQu" />
        </van-tab>
      </van-tabs>
    </van-popup>
    <!-- 运输方式 -->
    <van-popup
      v-model="type.show"
      @click-overlay="closeTransport"
      position="bottom"
      lock-scroll
      round
      safe-area-inset-bottom
    >
      <van-picker
        show-toolbar
        :columns="type.columns"
        @change="checkTransport"
        value-key="name"
        @cancel="type.show=false"
        @confirm="onTypeConfirm"
      />
    </van-popup>
    <!-- 违禁提示 -->
    <van-popup v-model="showGoods" class="noGoods">
      <div class="title">违禁提示</div>
      <div class="head">
        您的货物中包含邮寄禁运品:
        <span style="color: #ee0a24">{{ inform.goodsName }}</span>
      </div>
      <div class="head">各国清关禁品:</div>
      <div class="content">
        <div class="list">
          <div
            class="item"
            v-for="(item,index) in noGoodsList"
            :key="index"
          >{{ item.areaName }} - {{ item.name }}</div>
        </div>
      </div>
      <div class="footer" @click="closePpp">我知道了</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inform: {
        oldAddress: "", // 原寄地
        destination: "", // 目的地
        country: "", // 国家
        transport: "", // 交通方式
        warehouse: "", // 仓库
        goodsName: "", // 物品名称
        weight: "", // 重量
        long: "", // 长度
        wide: "", // 宽度
        high: "" // 高度
      },
      showGoods: false, //违禁提示,
      noGoodsList: [], //违禁物品列表
      countryId: "", // 国家id
      depotId: "", // 仓库id
      homePicker: {
        //国内选择器
        active: 0, //tab active
        sheng: [],
        shi: [],
        qu: [],
        shengValue: "",
        shiValue: "",
        quValue: ""
      },
      abroadPicker: {
        //国外选择器
        active: 0,
        allCountry: [], // 所有国家
        country: [],
        store: [], //仓库
        countryValue: "",
        storeValue: ""
      },
      origin: {
        value: ["", "", ""], //存放三级级城市,
        show: false, //弹出层
        selectRangle: true, //展示国家/国际选择
        rangle: 0 //国内0 国外1
      },
      destination: {
        value: ["", "", ""], //存放三级城市,
        show: false //弹出层
      },
      type: {
        columns: [
          {
            name: "海运",
            transport: "sea"
          },
          {
            name: "陆运",
            transport: "road"
          },
          {
            name: "空运",
            transport: "empty"
          },
          {
            name: "铁运",
            transport: "iron"
          }
        ],
        value: "",
        show: false
      }
    };
  },
  created() {
    this.initialData();
    // this.showGoods = true;
    this.gainDestination();
    let _message = JSON.parse(sessionStorage.getItem("message"));
    if (_message) {
      this.inform = _message;
      this.type.value = _message.value;
    }
  },
  computed: {
    isDisabled() {
      return false;
    }
  },
  methods: {
    showPopup() {
      this.showGoods = true;
    },
    closePpp() {
      this.showGoods = false;
    },
    goContent() {
      this.$router.push("/content");
    },
    // 点击运输方式蒙版关闭触发事件
    closeTransport() {
      if (this.inform.transport && this.type.value) {
        this.type.show = false;
      } else {
        this.inform.transport = this.type.columns[0].transport;
        this.type.value = this.type.columns[0].name;
      }
    },
    checkTransport(picker, value) {
      this.inform.transport = value.transport;
      this.type.value = value.name;
    },
    onTypeConfirm(picker, index) {
      this.inform.transport = this.type.columns[index].transport;
      this.type.value = this.type.columns[index].name;
      this.type.show = false;
    },
    showKeyboard(key) {
      this.weight.show = false;
      this.length.show = false;
      this.width.show = false;
      this.height.show = false;
      this[key].show = true;
    },
    // 显示目的地选择框
    chooseRangle() {
      this.origin.show = true;
      let _val = this.abroadPicker.countryValue;
      if (_val) {
        let _data = [];
        this.abroadPicker.allCountry.map(item => {
          if (item.countryName.indexOf(_val) !== -1) {
            _data.push(item);
          }
        });
        this.abroadPicker.country = _data;
      } else {
        this.abroadPicker.country = this.abroadPicker.allCountry;
      }
    },
    // 选择国家事件
    countryChange(e) {
      let _val = e.target.value;
      let _data = [];
      this.abroadPicker.allCountry.map(item => {
        if (item.countryName.indexOf(_val) !== -1) {
          _data.push(item);
        }
      });
      this.abroadPicker.country = _data;
      let _active = this.abroadPicker.active;
      if (_active === 1) {
        // 当前状态为仓库下
        let country = this.abroadPicker.allCountry.filter(
          item => item.countryName === _val
        );
        if (country.length > 0) {
          let id = country[0].countryId;
          this.gainStore(id);
        } else {
          this.abroadPicker.store = [];
        }
      }
    },
    changActive(value) {
      // value为0，即国家；value为1即仓库
      this.abroadPicker.active = value;
      if (value === 1) {
        if (this.abroadPicker.countryValue) {
          // 如果输入框有值
          let country = this.abroadPicker.allCountry.filter(
            item => item.countryName === this.abroadPicker.countryValue
          );
          if (country.length > 0) {
            let id = country[0].countryId;
            this.gainStore(id).then(() => {
              this.abroadPicker.storeValue =
                this.abroadPicker.store.length > 0
                  ? this.abroadPicker.store[0].depotName
                  : "";
              this.inform.warehouse =
                this.abroadPicker.store.length > 0
                  ? this.abroadPicker.store[0].depotName
                  : "";
              this.depotId =
                this.abroadPicker.store.length > 0
                  ? this.abroadPicker.store[0].depotId
                  : "";
            });
          } else {
            this.abroadPicker.store = [];
          }
        }
      } else {
        this.abroadPicker.storeValue = "";
        this.inform.warehouse = "";
        this.depotId = "";
      }
    },
    destinationBack() {
      this.origin.show = false;
      this.inform.oldAddress = "";
    },
    addressBack() {
      this.destination.show = false;
      this.inform.destination = "";
    },
    // 查询按钮
    goResult() {
      let data = this.inform;
      for (let item in data) {
        if (item === "oldAddress" && !data[item]) {
          this.$toast("请选择原寄地！");
          return;
        } else if (item === "country" && !data[item]) {
          this.$toast("请选择目的地！");
          return;
        } else if (item === "transport" && !data[item]) {
          this.$toast("请选择运输方式！");
          return;
        } else if (item === "tranport" && !data[item]) {
          this.$toast("请输入寄出货物名称！");
          return;
        } else if (item === "weight" && !data[item]) {
          this.$toast("请输入物品重量！");
          return;
        } else if (item === "long" && !data[item]) {
          this.$toast("请输入物品长度！");
          return;
        } else if (item === "wide" && !data[item]) {
          this.$toast("请输入物品宽度！");
          return;
        } else if (item === "high" && !data[item]) {
          this.$toast("请输入物品高度！");
          return;
        }
      }
      // 判断该商品是否为违禁品
      if (this.depotId) {
        let params = {
          depotId: this.depotId,
          goodsName: this.inform.goodsName
        };
        this.checkGoodsName(params);
      } else {
        let params = {
          countryId: this.countryId,
          goodsName: this.inform.goodsName
        };
        this.checkGoodsName(params);
      }
      // this.inquireData(this.inform);
    },
    // 确认原寄地
    selectAddress() {
      this.homePicker.shengValue = this.homePicker.shengValue
        ? this.homePicker.shengValue
        : this.homePicker.sheng[0].name;
      this.homePicker.shiValue = this.homePicker.shiValue
        ? this.homePicker.shiValue
        : this.homePicker.shi[0].name;
      this.homePicker.quValue = this.homePicker.quValue
        ? this.homePicker.quValue
        : this.homePicker.qu[0].name;
      const { shengValue, shiValue, quValue } = this.homePicker;
      this.inform.oldAddress = shengValue + shiValue + quValue;
      this.destination.show = false;
    },
    // 选择省市区函数
    checkSheng(picker, value) {
      this.homePicker.shengValue = value.name;
      this.homePicker.shi = value.secondCombine;
      this.homePicker.shiValue = value.secondCombine[0].name;
      this.homePicker.qu = value.secondCombine[0].secondCombine;
      this.homePicker.quValue = value.secondCombine[0].secondCombine[0].name;
    },
    checkShi(picker, value) {
      this.homePicker.shiValue = value.name;
      this.homePicker.qu = value.secondCombine;
      this.homePicker.quValue = value.secondCombinep[0].name;
    },
    checkQu(picker, value) {
      this.homePicker.quValue = value.name;
    },
    // 目的地确认按钮
    selectDestination() {
      if (this.abroadPicker.countryValue) {
        let _array = this.abroadPicker.country.filter(
          item => item.countryName === this.abroadPicker.countryValue
        );
        if (_array.length === 0) {
          this.abroadPicker.countryValue = this.abroadPicker.country[0].countryName;
          this.countryId = this.abroadPicker.country[0].countryId;
        } else {
          this.abroadPicker.countryValue = _array[0].countryName;
          this.countryId = _array[0].countryId;
        }
      } else {
        this.abroadPicker.countryValue = this.abroadPicker.country[0].countryName;
        this.countryId = this.abroadPicker.country[0].countryId;
      }
      // this.abroadPicker.storeValue = this.abroadPicker.storeValue ? this.abroadPicker.storeValue : (this.abroadPicker.store.length>0 ? this.abroadPicker.store[0].depotName: "");
      this.inform.country = this.abroadPicker.countryValue
        ? this.abroadPicker.countryValue
        : this.abroadPicker.country[0].countryName;
      const { countryValue, storeValue } = this.abroadPicker;
      this.inform.destination = countryValue + storeValue;
      if (storeValue) {
        this.inform.warehouse = storeValue;
      }
      this.origin.show = false;
    },
    // 国家change事件
    checkCountry(picker, value) {
      this.abroadPicker.countryValue = value.countryName;
      let _id = value.countryId;
      this.countryId = _id;
      this.inform.warehouse = "";
      this.gainStore(_id);
    },
    // 仓库change事件
    checkStore(picker, value) {
      this.abroadPicker.storeValue = value.depotName;
      this.inform.warehouse = value.depotName;
      this.depotId = value.depotId;
    },
    // 初始化数据，获取所有原寄地、目的地数据
    async initialData() {
      let res = await this.$api.get("/rest/user/originalPlace");
      if (res && res.code === 0) {
        this.homePicker.sheng = res[200];
        this.homePicker.shi = res[200][0].secondCombine;
        this.homePicker.qu = res[200][0].secondCombine[0].secondCombine;
      }
    },
    // 获取目的地
    async gainDestination() {
      let res = await this.$api.get("/rest/user/baseCountry");
      if (res && res.code === 0) {
        this.abroadPicker.allCountry = res[200];
      }
    },
    // 通过国家id获取仓库
    async gainStore(id) {
      let res = await this.$api.get("/rest/user/depotList", { countryId: id });
      if (res && res.code === 0) {
        this.abroadPicker.store = res[200];
        // if (res[200].length > 0) {
        //   this.abroadPicker.storeValue = res[200][0].depotName;
        //   this.inform.warehouse = res[200][0].depotName;
        //   this.depotId = res[200][0].depotId;
        // } else {
        //   this.abroadPicker.storeValue = "";
        //   this.depotId = "";
        //   this.inform.warehouse = "";
        // }
      }
    },
    // 查询接口
    async inquireData(params) {
      let res = await this.$api.post("/rest/user/finalQuery", params);
      if (res && res.code === 0) {
        if (res.ageing.length > 0) {
          let _params = res.ageing;
          sessionStorage.setItem("result", JSON.stringify(_params));
          this.inform.value = this.type.value;
          sessionStorage.setItem("message", JSON.stringify(this.inform));
          this.$router.push("/result");
        } else {
          this.$toast("该条件下无商品数据！");
        }
        // }
      } else if (res.code === 500) {
        this.$toast(res.msg);
      } else {
        this.$toast("无该路线信息！");
      }
    },
    // 查询商品是否属于违禁品
    async checkGoodsName(params) {
      let res = await this.$api.post(
        "/rest/countryEmbargoGoods/isExist",
        params
      );
      if (res && res.code == 200) {
        this.inquireData(this.inform); // 不是违禁品
      } else if (res && res.code == 0) {
        //是违禁物品
        this.showGoods = true;
        this.noGoodsList = res.rows;
      } else {
        this.$toast("无该商品信息！");
      }
    },
    handleBlur() {
      //ios端键盘透穿问题
      window.scrollTo(0, 0);
    }
  }
};
</script>

<style scoped>
.title-wrap {
  display: flex;
  align-items: center;
  margin: 60px 32px;
  font-size: 50px;
  font-weight: bold;
}
.title-wrap img {
  width: 203px;
  height: 60px;
  margin-right: 30px;
}
.title-wrap .right {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  color: #1989fa;
}
.desc {
  font-size: 14px;
  color: rgba(130, 144, 159, 1);
}
.van-cell {
  font-size: 16px;
}

/**请使用PX而不是px，因为用到了postcss-pxtorem 此时需要忽略转换 */
.van-padding {
  padding: 20px 16px;
}
.van-btn {
  margin: 20px 16px;
}

.pop-title {
  padding: 48px 32px;
  font-size: 30px;
  font-weight: bold;
  line-height: 45px;
}
.pop-content {
  width: 100%;
  height: 100%;
  padding: 28px 83px;
}
.pop-item {
  display: inline-block;
  padding: 20px 51px;
  text-align: center;
}
.pop-item img {
  width: 68px;
  height: 60px;
  margin-bottom: 8px;
}

.addressTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.addressTitle input {
  width: 60%;
}
.addressTitle .back {
  padding: 20px 40px;
  color: rgb(25, 137, 250);
  border-bottom: 1px solid #eee;
}

.van-picker {
  height: 220px;
  overflow: hidden;
}

.noGoods {
  padding: 40px 0 0 0;
  border-radius: 10px;
  width: 75%;
}
.noGoods .title {
  font-size: 36px;
  font-weight: bold;
  padding-bottom: 40px;
  text-align: center;
}

.noGoods .content {
  height: 400px;
  margin-bottom: 20px;
  overflow: scroll;
  font-size: 28px;
  padding: 0 40px;
}

.noGoods .content .list .item {
  margin-bottom: 20px;
}

.noGoods .head {
  margin-bottom: 20px;
  font-size: 28px;
  padding: 0 40px;
}

.noGoods .footer {
  padding: 20px 0 20px;
  text-align: center;
  font-size: 28px;
  border-top: 2px solid #1989fa;
  color: #1989fa;
}
</style>
